<template>
  <el-form
    ref="loginForm"
    :model="loginFormData"
    :rules="rules"
    :validate-on-rule-change="false"
    @keyup.enter="submitForm"
  >
    <el-form-item prop="username" class="mb-6">
      <el-input v-model="loginFormData.username" size="large" placeholder="请输入用户名" suffix-icon="user" />
    </el-form-item>
    <el-form-item prop="password" class="mb-6">
      <el-input v-model="loginFormData.password" show-password size="large" type="password" placeholder="请输入密码" />
    </el-form-item>
    <el-form-item v-if="loginFormData.openCaptcha" prop="captcha" class="mb-6">
      <div class="" style="display: flex; width: 100%; justify-content: space-between">
        <el-input v-model="loginFormData.captcha" placeholder="请输入验证码" size="large" class="captcha-input" />
        <div class="captcha-img">
          <img
            v-if="picPath"
            style="width: 100%; height: 100%; cursor: pointer"
            :src="picPath"
            alt="请输入验证码"
            @click="loginVerify()"
          >
        </div>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button class="shadow submit-btn" type="primary" size="large" @click="submitForm">
        登 录
      </el-button>
    </el-form-item>
    <!-- <el-form-item class="">
      <el-button
        class=""
        type="primary"
        size="large"
        @click="checkInit"
      >
        前往初始化
      </el-button>
    </el-form-item> -->
  </el-form>
</template>

<script setup name="Login">
import { captcha } from '@/api/user'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'

const router = useRouter()
// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 3) {
    return callback(new Error('请输入正确的用户名'))
  } else {
    callback()
  }
}
const checkPassword = (rule, value, callback) => {
  if (value.length < 6) {
    return callback(new Error('请输入正确的密码'))
  } else {
    callback()
  }
}

// 获取验证码
const loginVerify = async () => {
  const ele = await captcha()
  rules.captcha.push({
    max: ele.data.captchaLength,
    min: ele.data.captchaLength,
    message: `请输入${ele.data.captchaLength}位验证码`,
    trigger: 'blur',
  })
  picPath.value = ele.data.picPath
  loginFormData.captchaId = ele.data.captchaId
  loginFormData.openCaptcha = ele.data.openCaptcha
}
loginVerify()

// 登录相关操作
const loginForm = ref(null)
const picPath = ref('')
const loginFormData = reactive({
  username: 'admin',
  password: '',
  captcha: '',
  captchaId: '',
  openCaptcha: false,
})
const rules = reactive({
  username: [{ validator: checkUsername, trigger: 'blur' }],
  password: [{ validator: checkPassword, trigger: 'blur' }],
  captcha: [
    {
      message: '验证码格式不正确',
      trigger: 'blur',
    },
  ],
})

const userStore = useUserStore()
const login = async () => {
  return await userStore.LoginIn(loginFormData)
}
const submitForm = () => {
  loginForm.value.validate(async v => {
    if (!v) {
      // 未通过前端静态验证
      ElMessage({
        type: 'error',
        message: '请正确填写登录信息',
        showClose: true,
      })
      loginVerify()
      return false
    }

    // 通过验证，请求登陆
    const flag = await login()

    // 登陆失败，刷新验证码
    if (!flag) {
      loginVerify()
      return false
    }

    // 登陆成功
    return true
  })
}

// 跳转初始化
// const checkInit = async () => {
//   const res = await checkDB()
//   if (res.code === 0) {
//     if (res.data?.needInit) {
//       userStore.NeedInit()
//       router.push({ name: 'Init' })
//     } else {
//       ElMessage({
//         type: 'info',
//         message: '已配置数据库信息，无法初始化',
//       })
//     }
//   }
// }
</script>

<style lang="scss" scoped>
.mb-6 {
  margin-bottom: 24px;
}
.captcha-input {
  flex: 1 1 0%;
  margin-right: 20px /* 20px */;
}
.captcha-img {
  width: 33.333333%;
  height: 44px /* 44px */;
  background-color: #c3d4f2 /* #c3d4f2 */;
  border-radius: 4px /* 4px */;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.submit-btn {
  height: 44px /* 44px */;
  width: 100%;
}
</style>
